import CoworkConstant from '../util/CoworkConstant';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import {
  WeaNewScroll,
  WeaTop,
  WeaAlertPage,
  WeaTab,
  WeaTools,
  WeaLocaleProvider,
  WeaPopoverHrm,
} from 'ecCom';
import { Pagination } from 'antd';

import ReplyItem from './cowork/item/';

const { viewer } = WeaTools;

const getLabel = WeaLocaleProvider.getLabel;

@inject('coworkMainStore')
@observer
class RelateMe extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabKey: 'all',
    };
  }

  componentDidMount() {
    this.changeDateType('all');
  }

  componentWillReceiveProps() {
    this.changeDateType('all');
    this.setContent();
  }

  componentDidUpdate() {
    this.setContent();
  }

  componentWillUnmount() {
    const {
      coworkMainStore: { setContentParams },
    } = this.props;
    setContentParams({
      page: {
        current: 1,
        total: 0,
        pageSize: 20,
      },
    });
  }

  onImgs = (arr) => {
    Array.from(arr).forEach((img) => {
      img.onload = () => {
        img.setAttribute('data-imgsrc', img.src);
        img.setAttribute('class', 'formImgPlay');
        img.onclick = viewer;
      };
    });
  };

  setContent = () => {
    let content_img = document.querySelectorAll('.cowork-reply-remark img'); // 详情内容中的img
    this.onImgs(content_img);
  };

  render() {
    const { coworkMainStore } = this.props;
    let { content } = coworkMainStore;
    content = toJS(content);
    let {
      relateMeList = [],
      replyListViewRight = 0,
      page,
      relateLoading,
    } = content;
    let { tabKey } = this.state;
    return (
      <WeaTop
        ecId={`${(this && this.props && this.props.ecId) || ''}_WeaTop@pzixc3`}
        title={getLabel(32572, '与我相关')}
        icon={CoworkConstant.icon}
        iconBgcolor={CoworkConstant.iconBgColor}
        buttons={[]}
        showDropIcon={false}
        loading={relateLoading}
      >
        <div className="wea-cowork-main relateMe">
          <WeaPopoverHrm
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaPopoverHrm@f7ggk3`}
          />
          <WeaTab
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaTab@w0t14p`}
            datas={[
              { title: getLabel(332, '全部'), key: 'all' },
              { title: getLabel(15537, '今天'), key: 'today' },
              { title: getLabel(15539, '本周'), key: 'week' },
              { title: getLabel(83223, '近一月'), key: 'month' },
              { title: getLabel(83224, '近三月'), key: 'quarter' },
              { title: getLabel(83225, '近一年'), key: 'year' },
            ]}
            keyParam="key"
            onChange={this.changeDateType}
            selectedKey={tabKey}
          />
          <WeaNewScroll
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaNewScroll@13kgbp`}
          >
            {replyListViewRight != 1 ? (
              <WeaAlertPage
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaAlertPage@saw0m9`}
                style={{
                  height: 200,
                  position: 'relative',
                  paddingTop: '50px',
                }}
              >
                <div>{getLabel(382663, '暂无权限')}</div>
              </WeaAlertPage>
            ) : relateMeList && relateMeList.length > 0 ? (
              <div className="wea-cowork-reply-list">
                {relateMeList.map((record, index) => (
                  <ReplyItem
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_ReplyItem@x5ihz3@${record.id || index}`}
                    operate={this.operate}
                    {...record}
                    hasCoworkHref={true}
                  />
                ))}
              </div>
            ) : (
              <WeaAlertPage
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaAlertPage@l988f5`}
                icon="icon-coms-blank"
              >
                <div>{getLabel(83553, '暂无数据')}</div>
              </WeaAlertPage>
            )}
          </WeaNewScroll>
          <div className="fixPagination">
            <Pagination
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Pagination@bkg277`}
              {...page}
              showQuickJumper={true}
              onChange={this.changePage}
            />
          </div>
        </div>
      </WeaTop>
    );
  }

  changeDateType = (key) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.queryRelateMeList(key);
    this.setState({
      tabKey: key,
    });
  };
  changePage = (current) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.queryRelateMePage(current);
  };

  operate = (params) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.operateDicsuss(params, 'my');
  };
}

export default RelateMe;
